<template>
  <div id="dialogPubPost">
    <el-dialog
      class="about-set"
      title="添加我的帖子"
      :visible.sync="dialogData.isShow"
      width="628px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="110px"
          class="demo-ruleForm"
        >
          <el-form-item label="选择活动" prop="activity.activityId">
            <el-select
              value-key="activityId"
              v-model="ruleForm.activity"
              filterable
              placeholder="选择活动"
            >
              <el-option
                v-for="item in activityList"
                :key="item.activityId"
                :label="item.activityName"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择类型" prop="contentType">
            <el-radio-group v-model="ruleForm.contentType">
              <el-radio
                v-for="item in contentTypeList"
                :key="item.dictValue"
                :label="item.dictValue"
                disabled
              >
                {{ item.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择马甲" prop="robotId">
            <el-select
              v-model="ruleForm.robotId"
              filterable
              placeholder="请选择马甲"
              :disabled="ruleForm.canRobotRandom === true"
            >
              <el-option
                v-for="item in vestList"
                :key="item.robotId"
                :label="item.robotName"
                :value="item.robotId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="随机马甲">
            <el-switch
              v-model="ruleForm.canRobotRandom"
              :active-value="true"
              :inactive-value="false"
              active-color="#1DC8A4"
              @change="changeRandom(ruleForm.canRobotRandom)"
            ></el-switch>
          </el-form-item>
          <el-form-item label="帖子内容" prop="text">
            <el-input
              v-model="ruleForm.text"
              type="textarea"
              maxlength="60"
              show-word-limit
            ></el-input>
          </el-form-item>
          <!--帖子类型为图文-->
          <el-form-item label="添加帖子图片" prop="imgJson">
            <uploadImg from-page="pubPost" @setImgInfo="setImgInfo"></uploadImg>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { pubPost } from '@/api/activeManagement/post' // 接口
import uploadImg from '@common/uploadImg' // 上传图片公共组件
import { getVideoPara } from '@utils/pubFunction'
import { uploadVideo } from '@utils/uploadVideo'
import {
  getVestList,
  getActivities,
  getRandomRobotId
} from '@utils/dictionariesFunc'
export default {
  name: 'DialogPubWork',
  msg: '帖子管理-我的发布---发布帖子',
  components: {
    uploadImg
  },
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      vestList: [{ robotId: '', robotName: '- 请选择马甲 -' }], // 选择马甲
      contentTypeList: [{ dictValue: 'TEXT', dictLabel: '图文' }], // 帖子类型
      ruleForm: {
        contentType: 'TEXT', // 帖子类型
        img: [], //图片地址
        imgJson: [], // 图片信息
        robotId: '', //马甲id，当随机马甲为false的时候，该字段必选，必须传
        canRobotRandom: true, //是否为随机马甲，为true的话系统后端默认随机一个马甲
        activity: {}, //活动对象
        text: '', // 帖子内容
        textType: 'HTML', //固定死传HTML
        title: 'string' //标题，非必传
      },
      rules: {
        'activity.activityId': { required: true, message: '请选择活动' },
        // robotId: { required: true, message: '请选择马甲' },
        robotId: {},
        contentType: { required: true, message: '请选择帖子帖子类型' },
        text: {
          required: true,
          message: '帖子内容不能为空',
          trigger: 'change'
        },
        imgJson: { required: true, message: '请上传帖子帖子图片' }
      },
      activityList: []
    }
  },
  computed: {
    dapengUserId() {
      return this.$store.state.user.dapengUserId
    }
  },
  watch: {
    'ruleForm.canRobotRandom': {
      // 监听随机马甲
      handler(newValue, oldValue) {
        if (newValue === true) {
          // 随机马甲启用
          this.rules.robotId = {}
        } else {
          // 随机马甲关闭
          this.rules.robotId = { required: true, message: '请选择马甲' }
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getStatusList()
  },
  methods: {
    /* 获取数据状态 */
    async getStatusList() {
      // 马甲
      let data1 = await getVestList(this.dapengUserId)
      this.vestList = this.vestList.concat(data1)
      // 活动列表
      this.activityList = await getActivities()
      this.ruleForm.activity = this.activityList[0]
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
    },
    /* 图片上传成功后，获取返回结果 */
    setImgInfo(imgAry) {
      this.ruleForm.imgJson = imgAry
    },
    /* 改变随机马甲按钮状态 */
    changeRandom(status) {
      if (status === true) {
        // 启用随机马甲
        if (this.vestList.length === 0) {
          this.$message({
            message: '马甲列表为空，无法选择随机马甲',
            type: 'error'
          })
          this.ruleForm.canRobotRandom = true
        }
      }
    },
    /*发布帖子前，整合传参img*/
    getImg() {
      let ary = []
      this.ruleForm.imgJson.forEach((item) => {
        ary.push(item.url)
      })
      return ary
    },
    /* 确认提交 */
    async confirmLabel(formName) {
      this.loading = true
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let obj = { ...this.ruleForm }
          // userId,随机马甲时，取随机马甲，否则取当前马甲的robotId
          if (this.ruleForm.canRobotRandom === true) {
            obj.robotId = (await getRandomRobotId(this.dapengUserId)) || ''
          }
          obj.img = this.getImg()
          pubPost(
            obj,
            (response) => {
              this.loading = false
              this.$emit('refresh')
              this.cancelLabel()
            },
            (response) => {
              this.loading = false
              this.$message.warning('发布帖子失败，' + response.message)
            }
          )
        } else {
          this.loading = false
          return false
        }
      })
    }
  }
}
</script>

<style lang="less">
#dialogPubPost {
  @import url('~@common/style/textarea.less');
}
</style>
